<template>
	<div id="createmeet">
		<div v-loading="loading">
			<div class="left">
				<h1 class="title" v-if="registerForm.meetId">01-修改会议信息</h1>
				<h1 class="title" v-else>01-创建会议</h1>
				<el-form :model="registerForm" :rules="rules" ref="registerForm" label-position="top">
					<el-form-item label="所属项目">
						<el-select v-model="registerForm.projectId" :remote-method="getProjectList"
							placeholder="请选择会议所属项目" @change="getProjectByIdFun" filterable remote clearable
							reserve-keyword disabled style="width: 100%;">
							<el-option v-for="item in pjtList" :key="item.id"
								:label="`${item.projectName}${item.projectStatus=='TIMEOUT'?'(已结束)':''}`"
								:value="item.id"></el-option>
						</el-select>
					</el-form-item>
					<el-form-item label="会议主题" prop="conferenceTheme">
						<el-input v-model="registerForm.conferenceTheme" placeholder="请输入会议主题"></el-input>
					</el-form-item>
					<el-row :gutter="20">
						<el-col :span="24">
							<el-form-item label="会议类型" prop="meetingFormat">
								<span slot="label">
									会议类型
									<el-tooltip class="item" effect="dark" placement="top-start">
										<i class="el-icon-info" style="cursor: help;"></i>
										<div slot="content">
											<!-- 万木线上会：万木智会线上会议系统。<br><br> -->
											线上会：仅使用万木智会管理系统，使用腾讯会议开会。 <br><br>
											线下会：线下会议执行流程，需要完善【参会地点】与【详细地址】。
											仅管理：仅使用万木智会的合规流程（收集会务材料）。
										</div>
									</el-tooltip>
								</span>
								<el-radio-group v-model="registerForm.meetingFormat" @input="reaioInput">
									<!-- <el-radio label="ONLINE">万木线上会</el-radio> -->
									<el-radio label="TENCENT">线上会</el-radio>
									<el-radio label="OFFLINE">线下会</el-radio>
									<el-radio label="OTHER">仅管理</el-radio>
								</el-radio-group>
							</el-form-item>
						</el-col>
						<el-col :span="24">
							<el-form-item>
								<span slot="label">
									劳务提供时间
								</span>
								<el-row :gutter="20">
									<el-col :span="11">
										<el-date-picker v-model="registerForm.meetingAgreementStartDate"
											value-format="timestamp" type="date" style="width: 100%"
											placeholder="请选择开始提供劳务时间"></el-date-picker>
									</el-col>
									<el-col :span="2" style="text-align: center;">至</el-col>
									<el-col :span="11">
										<el-date-picker v-model="registerForm.meetingAgreementEndDate"
											value-format="timestamp" type="date" style="width: 100%"
											placeholder="请选择结束提供劳务时间"></el-date-picker>
									</el-col>
								</el-row>
							</el-form-item>
						</el-col>
					</el-row>
					<el-row :gutter="20">
						<el-col :span="12">
							<el-form-item label="所属地区">
								<!-- <el-input v-model="registerForm.district" placeholder="请选择地区"></el-input> -->
								<!-- <el-cascader style="width: 100%;" v-model="registerForm.locationId" placeholder="请选择地区"
                :options="locationList" filterable :props="{value:'id',label:'location'}"></el-cascader> -->
								<el-select style="width: 100%;" v-model="registerForm.locationId" filterable
									@change="$forceUpdate()" placeholder="请选择地区">
									<el-option v-for="item in locationList" :key="item.id" :label="item.location"
										:value="item.id">
									</el-option>
								</el-select>
							</el-form-item>
						</el-col>
						<el-col :span="12">
							<el-form-item label="会议时间" prop="timestamp">
								<el-date-picker v-model="registerForm.timestamp" value-format="timestamp"
									type="datetime" style="width: 100%" placeholder="请选择会议开始时间"></el-date-picker>
							</el-form-item>
						</el-col>
					</el-row>
					<el-form-item label="医生参会链接" prop="meetingLiveUrl" v-if="registerForm.meetingFormat=='TENCENT'">
						<el-input v-model="registerForm.meetingLiveUrl" placeholder="请输入会议链接 (如腾讯会议链接)">
						</el-input>
					</el-form-item>
					<el-form-item label="参会地点" prop="location" v-if="registerForm.meetingFormat=='OFFLINE'">
						<el-cascader v-model="registerForm.location" :options="regionTree" clearable
							style="width: 100%;" :props="{ value:'name', label:'name'}"
							@change="cascaderChange"></el-cascader>
					</el-form-item>
					<el-form-item label="详细地址" prop="position" v-if="registerForm.meetingFormat=='OFFLINE'">
						<el-input v-model="registerForm.position" placeholder="请输入详细地址">
							<el-button slot="append" icon="el-icon-map-location" @click="showMap()">使用地图定位</el-button>
						</el-input>
					</el-form-item>
					<div label="参会医生" class="attendingDoctor">
						<div class="label">参会医生</div>
						<div class="option">
							<el-button class="addStanding" type="primary" plain icon="el-icon-circle-plus-outline"
								@click="addStanding = true">新增参会身份
							</el-button>
							<el-dialog v-if="addStanding" :visible.sync="addStanding" width="500px">
								<div class="title">新增参会身份</div>
								<el-form ref="StandForm" :model="StandForm" :rules="rules" label-width="120px"
									:modal-append-to-body="true" :append-to-body="true" label-position="top">
									<el-form-item label="参会身份名称" prop="roleName">
										<el-input v-model="StandForm.roleName" placeholder="请输入您要新增的参会身份名称"></el-input>
									</el-form-item>
									<el-form-item label="劳务金额(税前)" prop="roleMoney">
										<el-input v-model="StandForm.roleMoney" placeholder="请输入该参会身份的劳务金额"></el-input>
									</el-form-item>
									<el-form-item label="在合同中显示的身份名称">
										<el-input v-model="StandForm.roleShow" placeholder="在合同中显示的身份名称"></el-input>
									</el-form-item>
								</el-form>
								<span slot="footer" class="dialog-footer">
									<el-button @click="addStanding = false;resetForm('StandForm')">取 消</el-button>
									<el-button type="primary" @click="addStandingFun('StandForm')">确 定</el-button>
								</span>
							</el-dialog>

							<el-upload class="upload" :action="`${baseUrl}/sign/live/official/importMeetingRole`"
								:data="{meetingId:$route.query.mId,projectId:registerForm.projectId}"
								:headers="{token:token}" :on-success="importMeetingRoleSuccess" :show-file-list="false">
								<el-button class="addStanding" type="primary" plain
									icon="el-icon-circle-plus-outline">导入参会人员
								</el-button>
							</el-upload>
							<el-link target="_blank" type="primary"
								href="//life-oasis.oss-cn-beijing.aliyuncs.com/video/newtemplate/%E5%8A%B3%E5%8A%A1%E5%8D%8F%E8%AE%AE%E6%98%8E%E7%BB%86.xlsx">
								下载模板
							</el-link>
						</div>
					</div>
					<el-form-item class="doctors" v-for="item in roleList" :key="item.id">
						<template slot="label">
							<span>
								{{ item.roleName }}
							</span>
							<b>
								劳务(税前):￥{{ item.roleMoney }}
							</b>
						</template>
						<el-button type="text" icon="el-icon-delete" class="delete" @click="deleteFun(item)">删除
						</el-button>
						<div class="meetingType" @click="showDoctorsFun(`${item.id}`)">
							<p class="docs" v-if="doctorCk[`${item.id}`][0]">
								<span v-for="(item2,k) in doctorCk[`${item.id}`]" :key="k">
									{{ item2.fullName }}
									<template v-if="k<doctorCk[`${item.id}`].length-1">,</template>
								</span>
							</p>
							<span class="placeholder" v-else>请选择参会人员 </span>
							<span class="add">添加<i class="el-icon-plus"></i></span>
						</div>
					</el-form-item>
				</el-form>
			</div>
			<div class="center">

				<h1 class="title">02-直播间设置</h1>
				<div style="display: flex;align-content: center; margin-bottom: 30px;">
					<div style="margin: 0px 5px">
						<h3 style="font-weight: bolder;margin: 10px 0px;">
							会议KV
						</h3>
						<ImageUpload ref="imageUpload1" v-model="registerPersonnel.coverImageUrl" :limit="1" />
					</div>
					<div style="margin: 0px 5px">
						<h3 style="font-weight: bolder;margin: 10px 0px;">
							直播间背景图
						</h3>
						<ImageUpload ref="imageUpload2" v-model="registerPersonnel.bgImage" :limit="1" />
					</div>
					<div style="margin: 0px 5px">
						<h3 style="font-weight: bolder;margin: 10px 0px;">
							会议海报
							<el-button style="height: 20px;line-height: 2px" size="small" @click="toViewImage">生成
							</el-button>
							<!--              <el-button style="height: 20px;line-height: 2px" size="small" @click="convertToCanvas">生成</el-button>-->
						</h3>
						<ImageUpload ref="imageUpload3" v-model="registerPersonnel.bill" :limit="1" />
					</div>
				</div>


				<h1 class="title">03-人员权限</h1>
				<el-form :model="registerPersonnel" :rules="rules" ref="registerPersonnel" label-position="top">
					<!-- v-loading="loading"> -->
					<el-row :gutter="20">
						<el-col :span="24">
							<el-form-item label="立项单位" prop="meetingMechanismId">
								<el-select filterable v-model="registerPersonnel.meetingMechanismId" clearable
									placeholder="请选择立项单位" style="width: 100%;" disabled
									@change="getDepartmentList( $event,'meetingMechanismId')">
									<el-option v-for="item in MechanismList" :key="item.id" :label="item.deptName"
										:value="item.id"></el-option>
								</el-select>
							</el-form-item>
						</el-col>
						<el-col :span="24">
							<el-form-item label="合规管理员" prop="officesIds">
								<el-select filterable v-model="registerPersonnel.officesIds" clearable
									placeholder="请选择合规管理员" multiple style="width: 100%;" :disabled="!projectOriginator">
									<el-option v-for="item in projectOriginator" :key="item.id" :label="item.fullName"
										:value="item.id"></el-option>
								</el-select>
							</el-form-item>
						</el-col>
						<!-- <el-col :span="24">
            <el-form-item label="劝募人员" prop="fundraisingIds">
              <el-select filterable v-model="registerPersonnel.fundraisingIds" clearable
                placeholder="请选择劝募人员" multiple style="width: 100%;" :disabled="!projectOriginator">
                <el-option v-for="item in projectOriginator" :key="item.id" :label="item.fullName"
                  :value="item.id"></el-option>
              </el-select>
            </el-form-item>
          </el-col> -->
						<el-col :span="24">
							<el-form-item label="支持企业" prop="meetingEnterpriseId">
								<el-select filterable v-model="registerPersonnel.meetingEnterpriseId" clearable
									placeholder="请选择支持企业" style="width: 100%;"
									@change="getDepartmentList($event,'meetingEnterpriseId')">
									<el-option v-for="item in enterPriseList" :key="item.id" :label="item.deptName"
										:value="item.id"></el-option>
								</el-select>
							</el-form-item>
						</el-col>

						<el-col :span="24">
							<el-form-item label="执行机构" prop="meetingActuatorId">
								<el-select filterable v-model="registerPersonnel.meetingActuatorId" clearable
									placeholder="请选择执行机构" style="width: 100%;" disabled
									@change="getDepartmentList($event,'meetingActuatorId')">
									<el-option v-for="item in orgList" :key="item.id" :label="item.deptName"
										:value="item.id"></el-option>
								</el-select>
							</el-form-item>
						</el-col>
						<el-col :span="24">
							<el-form-item label="会务负责人" prop="actuatorIds">
                <template #label>
<!--                  <span class="el-form-item__label" style="color: #f56c6c; margin-right: 4px;">*</span>-->
                  <span style="margin-right: 5px">会务负责人</span>
                  <el-button type="primary" size="mini" @click="open =true">新增</el-button>
                  <el-button type="info" size="mini" icon="Refresh" @click="refresh">刷新</el-button>
                </template>

                  <el-select filterable clearable placeholder="请选择执行机构下的助教账号" multiple style="width: 100%;"
                             v-model="registerPersonnel.meetingActuatorIds"
                             :disabled="!executive||!registerPersonnel.meetingActuatorId">
                    <el-option v-for="item in executive" :key="item.id" :label="item.fullName"
                               :value="item.id"></el-option>
                  </el-select>



              </el-form-item>


						</el-col>
						<el-col :span="24">
							<el-form-item  prop="laborActuatorIds">
                <template #label>
<!--                  <span class="el-form-item__label" style="color: #f56c6c; margin-right: 4px;">*</span>-->
                  <span style="margin-right: 5px">劳务负责人</span>
                  <el-button type="primary" size="mini" @click="open =true">新增</el-button>
                  <el-button type="info" size="mini" icon="Refresh" @click="refresh">刷新</el-button>
                </template>


								<el-select filterable clearable placeholder="请选择执行机构下的助教账号" multiple style="width: 100%;"
									v-model="registerPersonnel.laborActuatorIds "
									:disabled="!executive||!registerPersonnel.meetingActuatorId">
									<el-option v-for="item in executive" :key="item.id" :label="item.fullName"
										:value="item.id"></el-option>
								</el-select>



							</el-form-item>
						</el-col>
					</el-row>
				</el-form>


			</div>
			<div class="options">
				<el-button type="info" class="bank" :loading="loading" @click="bank()">返回</el-button>
				<el-button type="primary" class="next" :loading="loading" @click="onSubmit()">发布会议</el-button>
				<el-button type="warning" class="next" :loading="loading" @click="onSubmit2()"
					v-if="meetingStatus=='WAIT_CLAIM'&&registerForm.meetingFormat!='ONLINE'">直接结束会议
				</el-button>
			</div>
		</div>
		<!--    registerPersonnel.coverImageUrl?registerPersonnel.coverImageUrl:bannerUrl-->
		<el-dialog title="海报预览与操作" custom-class="posterPreview" :visible.sync="billImageShow">
			<p class="preview-title">预览您生成的会议海报，满意后可以保存并使用</p>
			<div class="canvasBox" ref="canvasBox" :style="canvasBoxStyle">
				<div
					style="background: #fff; width: 350px; padding: 10px 10px 30px 10px;box-sizing: border-box;border-radius: 10px;">
					<img ref="kvImage" style="width: 330px; height: auto; border-radius: 10px" :src="coverImageUrl"
						crossorigin="anonymous" />
					<div style=" padding: 20px 0px 0px 10px">
						<!--                    则历史文字内容-->
						<h2 style="font-weight: bolder;margin-bottom: 10px">{{ registerForm.conferenceTheme }}</h2>
						<div style="margin: 8px 0; ">
							<el-icon class="el-icon-date"></el-icon>
							<span style="margin-left: 10px">{{ $moment(registerForm.timestamp).format('L') }}
								{{ $moment(registerForm.timestamp).format('LT') }}</span>
						</div>

						<div style="margin: 8px 0; ">
							<el-icon class="el-icon-discount"></el-icon>
							<span style="margin-left: 10px">{{ projectName }}</span>
						</div>

						<div style="display: flex; margin-top: 35px" v-for="(item,index) in allDoctorList" :key="index">
							<el-icon style="color: #3c9cff" class="el-icon-coordinate"></el-icon>
							<div style="margin-top: -2px; margin-left: 10px;font-size: 15px;">
								{{ item.fullName || '无' }}<br />
								<span style="color:  #A9A9A9;"> {{ item.hospital || '无' }} {{ item.title }}</span>
							</div>
						</div>


					</div>
					<hr style=" border: none; height: 1px; width: 100%; margin: 24px 0;background-color: #dcdfe6;" />
					<div
						style=" padding: 0px 0px 0px 10px; display: flex; align-items: center; justify-content: space-between;">
						<div>
							<div style="margin: 7px 0; display: flex;align-items: center; ">
								<div style=" display: block; height: 13px;width: 13px;  background-color: #3c9cff">
								</div>
								<div style="margin-left: 10px">参会方式</div>
							</div>

							<div style="margin: 4px 0; "><span style="font-size: 13px">1、扫描右侧二维码直接加入会议</span></div>
							<!-- <div style="margin: 4px 0; "><span style="font-size: 13px">2、点击公众号消息跳转</span></div> -->
						</div>

						<div style="margin-right: 20px">
							<!--              <div id="qrcode"  style="width: 80px;height: 80px">-->
							<!--                <div  id="qroode" class="qrconde" ref="qrCodeDiv"></div>-->
							<!--              </div>-->
							<img style="width: 80px;height: 80px" :src="banner1" crossorigin="anonymous">
						</div>

					</div>
				</div>
			</div>

			<div style="margin: 30px 0px; display: flex; align-items: center; justify-content: space-between;">
				<el-button style="width: 100%;" @click="switchBackground" type="primary">1.切换海报背景<i
						class="el-icon-arrow-right el-icon--right"></i></el-button>

				<el-button style="width: 100%;" @click="settingQrUrl" type="primary">2.配置二维码链接</el-button>
				<el-button type="primary" style="width: 100%;" @click="convertToCanvas">3.保存</el-button>
			</div>

			<!--      <span slot="footer" class="dialog-footer">-->
			<!--    <el-button type="primary" style="width: 100%;" @click="convertToCanvas">保 存</el-button>-->
			<!--  </span>-->
		</el-dialog>

		<QrGeneratorDialog ref="QrGeneratorDialog" @getQrCode="getQrCode"></QrGeneratorDialog>




		<el-dialog custom-class="doctorList" :visible.sync="persShow" v-loading="loading">
			<h1 class="title">医生列表</h1>
			<div class="searth">
				<el-input @change="searthDoctorFun()" v-model="nameKeyword" prefix-icon="el-icon-search" clearable
					placeholder="搜索医生姓名/手机号/医院"></el-input>
				<el-select v-model="departVal" placeholder="按科室筛选" clearable filterable @change="searthDoctorFun()">
					<el-option v-for="item in department" :key="item.name" :label="item.name" :value="item.name">
					</el-option>
				</el-select>
				<el-select v-model="titVal" placeholder="按职称筛选" clearable filterable @change="searthDoctorFun()">
					<el-option v-for="item in title" :key="item.name" :label="item.name" :value="item.name">
					</el-option>
				</el-select>
				<el-select v-model="orderBy" placeholder="按职称筛选" filterable @change="searthDoctorFun()">
					<el-option label="综合排序" value="综合排序"></el-option>
					<el-option label="时间排序" value="时间排序"></el-option>
				</el-select>
				<el-button type="primary" @click="searthDoctorFun()">搜索</el-button>
				<el-button type="primary" @click="creatorDoctor()">新增医生</el-button>
				<el-button type="primary" @click="persShow = false">确认选择</el-button>
			</div>
			<div class="list">
				<div class="item" v-for="item in doctorList" :key="item.id" @click="checkDoctor(item)">
					<img src="../../../assets/imgs/yisheng.svg" alt="">
					<div class="docInfo">
						<div class="name">{{ item.fullName ? item.fullName : item.phoneNumber }}</div>
						<div class="hospital">{{ item.hospital }}</div>
						<div class="tit">
							<span v-if="item.department">
								<i class="el-icon-timer"></i>
								{{ item.department }}</span>
							<span v-if="item.title">
								<i class="el-icon-location"></i>
								{{ item.title }}
							</span>
						</div>
						<i class="icon el-icon-success" style="color: #2979ff; font-size: 40px;"
							v-if="doctorIds[doctorType]&&doctorIds[doctorType].includes(item.id)"></i>
					</div>
				</div>
				<div class="null" v-if="!doctorList[0]">
					<img src="../../../assets/imgs/EmptyState.png" alt="">
					<p>列表没有匹配项</p>
				</div>
			</div>
			<el-pagination background layout="prev, pager, next" :total="total" :page-size="size"
				:current-page.sync="page" class="pagination" @current-change="getDoctorList"
				:hide-on-single-page="false"></el-pagination>
		</el-dialog>

		<el-dialog custom-class="map" v-if="mapShow" :visible.sync="mapShow" width="80%" :close-on-click-modal="false">
			<div class="mapBox">
				<div class="searchBox">
					<el-input style="width:300px;" placeholder="请输入关键字" suffix-icon="el-icon-search" size="medium"
						v-model="keyword">
						<!-- @input="searchByKeyword" @focus="searchByKeyword" -->
						<el-button slot="append" @click="searchByKeyword()">
							<span>搜索</span>
						</el-button>
					</el-input>
					<div class="search-result" v-if="searchResult.length && isShowResult">
						<div class="result-item" v-for="item of searchResult" :key="item.id"
							@click="handleClickResult(item)">
							<div class="area-name">{{ item.name }}</div>
							<div class="area-address">{{ item.district + item.address }}</div>
						</div>
					</div>
				</div>
				<div id="container" style="width: 100%;height: 400px;"></div>
				<div class="feedbackAndOperation">
					<el-form :inline="true" :model="loc">
						<el-form-item label="经度">
							<el-input style="width: 300px;" v-model="loc.longitude" placeholder="经度"></el-input>
						</el-form-item>
						<el-form-item label="纬度">
							<el-input style="width: 300px;" v-model="loc.latitude" placeholder="纬度"></el-input>
						</el-form-item>
					</el-form>

					<el-button type="primary" @click="confirmPosition">确认位置</el-button>
				</div>
			</div>
		</el-dialog>



    <!-- 添加或修改患教用户对话框 -->
    <el-dialog title="添加机构用户" :visible.sync="open" width="500px" append-to-body>
      <el-form ref="form" :model="form" :rules="formRules" label-width="80px">
        <el-form-item label="手机号码"  prop="phoneNumber">
          <el-input v-model="form.phoneNumber" type="number" placeholder="请输入手机号码 (助教登录账号)" />
        </el-form-item>

        <el-form-item label="姓名" prop="fullName">
          <el-input v-model="form.fullName" placeholder="请输入姓名" />
        </el-form-item>
        <el-form-item label="执行机构" prop="meetingActuatorId">
          <el-select filterable v-model="registerPersonnel.meetingActuatorId"
                     placeholder="请选择执行机构" style="width: 100%;" disabled>
            <el-option v-for="item in orgList" :key="item.id" :label="item.deptName"
                       :value="item.id"></el-option>
          </el-select>
        </el-form-item>


      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button :loading="buttonLoading" type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>



	</div>
</template>
<script>
	import {
		getLocationList,
		getOfficialInfo,
		getofficialUserList,
		officialActuatorList,
		officialCreateMeeting,
		officialEnterPriseList,
		officialGetDoctorList,
		officialGetMeetRoleList,
		officialGetProjectById,
		officialGetUpdateMeetInfo,
		officialtMechanismList,
		officialUpdateMeeting,
    addExecutiveUser,
		oprojectList
	} from '@/request/api.js';
	import regionTree from '@/assets/regionTree.json'
	import title from '@/assets/title.json';
	import department from '@/assets/department.json';
	import baseUrl from "@/request/config.js"
	import AMapLoader from '@amap/amap-jsapi-loader'
	import ImageUpload from '@/components/ImageUpload.vue'
	import html2canvas from 'html2canvas'
	import QRCode from 'qrcodejs2'

	import QrGeneratorDialog from '@/components/QrGenerator.vue'
	window._AMapSecurityConfig = {
		securityJsCode: '385b55195b7924f01e7def40388cfd4e' //填写你的安全密钥
	}

	export default {
		name: 'createmeet',
		components: {
			ImageUpload,
			QrGeneratorDialog
		},
		computed: {
			// 计算属性来生成背景样式
			canvasBoxStyle() {
				return {
					backgroundImage: `url(${this.backgroundImages[this.currentBackgroundIndex]})`,
					backgroundSize: 'cover', // 根据需要调整
					backgroundPosition: 'center', // 根据需要调整
					width: '370px',
					height: '100%',
					// width: '100%',
					padding: '40px 0px 40px 10px',
					boxSizing: 'border-box',
					borderRadius: '6px',
					// position: 'absolute',
					// top: '0',
					// left: '0',
					// zIndex: '999',
					// opacity: '0.8',
					// filter: 'blur(10px)',
					// transform: 'scale(1.1)'
				};
			}
		},
		data() {
			return {
				imgData: "",
				// 假设这些是你的背景图片路径
				backgroundImages: [
					require('@/assets/imgs/bgImage/蓝色.jpg'),
					require('@/assets/imgs/bgImage/红色.jpg'),
					require('@/assets/imgs/bgImage/绿色.jpg')
				],
				currentBackgroundIndex: 0, // 当前背景图片的索引
				bannerUrl: require('/src/assets/imgs/back2.png'),
				coverImageUrl: "",
				// banner1: 'https://life-oasis-wmzh.oss-cn-beijing.aliyuncs.com/wmzh/travel/survey_qrcode_f600e566-6f71-46f3-887e-675615eaf522.png',
				banner1: 'https://www.baidu.com',
				token: JSON.parse(localStorage.getItem('token')).token,
				addStanding: false,
				StandForm: {
					roleName: '',
					roleMoney: ''
				},
				locationList: '',
				baseUrl: '',
				loading: false,
				projectName: "",
				registerForm: {
					meetingAgreementStartDate: "",
					meetingAgreementEndDate: "",
					meetingFormat: '', // 会议类型
					projectId: '', // 所属项目ID
					meetId: '', // 会议id
					projectType: '', // 所属项目
					startTime: '', // 会议开始时间
					timestamp: '', // 会议开始时间戳
					conferenceTheme: '', // 会议主题
					doctors: '', // 选择参会医生
					cover: '', // 直播封面
					placard: '', // 海报
					location: '',
					position: '',
					meetingLiveUrl: ''
				},
				meetingStatus: '',
				registerPersonnel: {
					meetingMechanismId: '',
					fundraisingIds: [],
					officesIds: [],
					meetingEnterpriseId: '',
					meetingActuatorId: '',
					// actuatorIds: [],
					meetingActuatorIds: [],
					laborActuatorIds: []
				},
				projectInfo: '',
        form:{},
        open:false,
        // 按钮loading
        buttonLoading: false,
        formRules:{

          phoneNumber: [
            { required: true, message: "手机号不能为空", trigger: "blur" }
          ],
          fullName: [
            { required: true, message: "姓名不能为空", trigger: "blur" }
          ]

        },
				rules: {
					meetingMechanismId: [{
						required: true,
						message: '请选择立项单位',
						trigger: 'change'
					}],
					fundraisingIds: [{
						required: true,
						message: '请选择劝募人员',
						trigger: 'change'
					}],
					officesIds: [{
						required: true,
						message: '请选择项目官员',
						trigger: 'change'
					}],
					meetingEnterpriseId: [{
						required: false,
						message: '请选择支持企业',
						trigger: 'change'
					}],
					meetingActuatorId: [{
						required: true,
						message: '请选择执行机构',
						trigger: 'change'
					}],
					// laborActuatorIds: [{
					// 	required: true,
					// 	message: '请选择劳务负责人',
					// 	trigger: 'change'
					// }],
					// meetingActuatorIds: [{
					// 	required: true,
					// 	message: '请选择会务负责人',
					// 	trigger: 'change'
					// }],
					conferenceTheme: [{
						required: true,
						message: '请输入会议主题',
						trigger: 'change'
					}],
					roleName: [{
						required: true,
						message: '请输入身份名称',
						trigger: 'change'
					}],
					roleMoney: [{
						required: true,
						message: '请输入劳务金额',
						trigger: 'change'
					}],
					meetingFormat: [{
						required: true,
						message: '请选择会议类型',
						trigger: 'change'
					}],
					// meetingLiveUrl: [{
					// 	required: true,
					// 	message: '请选输入会议链接',
					// 	trigger: 'change'
					// }],
					timestamp: [{
						required: true,
						message: '请选择会议开始时间',
						trigger: 'change'
					}],
					doctors: [{
						validator: (rule, value, callback) => {
							let flag = false;
							for (let key in this.doctorIds) {
								if (this.doctorIds[key].length) {
									flag = true;
									break;
								}
							};
							if (flag) {
								callback();
							} else {
								callback(new Error('请至少添加一个参会人员'));
							}
						},
						trigger: 'change'
					}],
					bgImage: [{
						validator: (rule, value, callback) => {
							if (this.registerImg[1]) {
								callback();
							} else {
								callback();
								// callback(new Error('请上传会议背景图(KV)'));
							}
						},
						trigger: 'blur'
					}],
					bill: [{
						validator: (rule, value, callback) => {
							if (this.registerImg[2]) {
								callback();
							} else {
								callback();
								// callback(new Error('请上传会议海报(会议宣传图)'));
							}
						},
						trigger: 'blur'
					}]
				},

				fileList1: [],
				fileList2: [],
				dialogImageUrl: '',
				dialogVisible: false,
				registerImg: {
					1: '',
					2: ''
				},

				persShow: false,
				billImageShow: false,
				canvasimgUrl: '',
				doctorType: '',
				roleList: [], // 身份列表
				doctorCk: {}, // 选中的医生
				doctorIds: {}, // 选中的医生

				allDoctorList: [], // 选中的医生列表 用于生成会议海报时候永

				nameKeyword: '',
				hospitalKeywords: '',
				phonenumberKeywords: '',
				page: 1,
				size: 10,
				total: 0,
				doctorList: '',
				checks: [],
				checked: [],

				department: '',
				departVal: '',
				title: '',
				titVal: '',
				orderBy: '综合排序',

				regionTree: '',

				mapShow: false,
				map: null,
				loc: {
					longitude: '',
					latitude: ''
				},
				marker: null,
				autocomplete: null,
				placeSearch: null, //搜索框
				keyword: '',
				searchResult: [],
				isShowResult: false,
				// map: {
				// 	center: {
				// 		lat: 39.914894,
				// 		lng: 116.404146
				// 	},
				// 	zoom: 13,
				// },
				// bMapObj: '',
				// markerWinShow: true,
				// address: '',
				// addressCK: '',
				// surroundingPois: [],

				MechanismList: [], // 立项单位列表
				projectOriginator: '', // 官员列表
				orgList: [], // 助教列表
				executive: [],
				enterPriseList: [], // 支持企业列表
				supportStaff: '',

				pjtList: [],

				userInfo: '',

				projectDetails: ''
			}
		},
		created() {

			this.regionTree = regionTree;
			this.baseUrl = baseUrl;
			this.title = title;
			this.department = department;
			this.registerForm.projectId = this.$route.query.pId;
			this.registerForm.meetId = this.$route.query.mId;
			this.echo();
			this.getLocationListFun();
			this.getProjectDetails();
			this.getRoleListFun();
			this.getDoctorList();
			this.getProjectByIdFun();
			if (this.registerForm.meetId) {
				this.getMeetingDetail();
			}
			this.officialActuatorListFun();
			this.getProjectList();
			this.getUserInfo();
		},
		watch: {
			registerForm: {
				handler(nval, oval) {
					let data = {
						meetTit: nval.conferenceTheme,
						timestamp: nval.timestamp,
						registerImg: this.registerImg
					}
					setTimeout(() => {
						localStorage.setItem('cache', JSON.stringify(data));
					}, 300)
				},
				deep: true
			},
			registerImg: {
				handler(nval, oval) {
					let data = {
						meetTit: this.registerForm.conferenceTheme,
						timestamp: this.registerForm.timestamp,
						registerImg: nval
					}
					setTimeout(() => {
						localStorage.setItem('cache', JSON.stringify(data));
					}, 300)
				},
				deep: true
			}
		},
		mounted() {},
		methods: {


      // 取消按钮
      cancel() {
        this.open = false;
        this.form={}
      },
      /** 提交按钮 */
      submitForm() {
        this.$refs["form"].validate(valid => {
          if (valid) {
            this.buttonLoading = true;
            this.form.actuatorId=this.registerPersonnel.meetingActuatorId
            this.form.meetingId= this.$route.query.mId
            addExecutiveUser(this.form).then(response => {
              if(response.code==200){
                this.$message({
                  message: '新增成功',
                  type: 'success'
                });
                this.open = false;
                this.refresh()
              }else {
                this.$message.error(response.msg);
              }

            }).finally(() => {
              this.buttonLoading = false;
            });
          }
        });
      },
      refresh(){
        this.getDepartmentList(this.registerPersonnel.meetingActuatorId ,
            'meetingActuatorId');
      },

			settingQrUrl() {
				this.$nextTick(() => {
					this.$refs.QrGeneratorDialog.openDialog()
				})
			},

			getQrCode(value) {
				console.log(value)
				this.banner1 = value
				this.$nextTick(() => {
					this.$refs.QrGeneratorDialog.closeDialog()
				})
			},



			// 确认签到定位
			confirmPosition() {
				console.log(this.loc)
				if (this.loc.latitude && this.loc.longitude) {
					// this.registerForm.position = res.data.position;
					this.registerForm.longitude = this.loc.longitude;
					this.registerForm.latitude = this.loc.latitude;
					this.mapShow = false;
				} else {
					this.$message.error('请选择签到定位')
				}
			},

			showMap() {
				this.mapShow = true;
				this.initMap()
			},
			// 地图初始化
			initMap() {
				AMapLoader.reset()
				AMapLoader.load({
					key: "cbcb7c74bcbeb6042114aac4a0645fcd", // 申请好的Web端开发者Key，首次调用 load 时必填
					version: "2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
					plugins: ['AMap.AutoComplete', 'AMap.PlaceSearch', 'AMap.MarkerClusterer',
						'AMap.DistrictSearch', 'AMap.ZoomControl', 'AMap.Polygon'
					], // 需要使用的的插件列表，如比例尺'AMap.Scale'等
				}).then((AMap) => {
					this.map = new AMap.Map("container", { //设置地图容器id
						// viewMode: "3D",    //是否为3D地图模式
						resizeEnable: true,
						zoom: 12, //初始化地图级别
						center: [116.404146, 39.914894], //初始化地图中心点位置
					});

					this.map.on('click', (e) => {
						this.loc.latitude = e.lnglat.lat
						this.loc.longitude = e.lnglat.lng
						this.initMarket()
					})
					var autoOptions = {
						input: "tipinput"
					};
					this.autocomplete = new AMap.AutoComplete(autoOptions);

					this.placeSearch = new AMap.PlaceSearch({
						map: this.map
					});


				}).catch(e => {
					console.log(e);
				})
			},
			onComplete(data) {
				// 定位成功回调函数
				this.map.setCenter([data.position.lng, data.position.lat]); // 设置地图中心点
				// 可以在这里添加其他操作，例如添加标记、信息窗口等
			},
			// 点击地图
			initMarket(name) {
				// console.log(name)
				if (!(this.loc.longitude && this.loc.latitude)) {
					return
				}
				this.isShowResult = false
				if (this.map.getAllOverlays('marker').length) {
					// 地图已有标注，清除标注
					this.map.clearMap();
				}
				this.marker = new AMap.Marker({
					icon: 'https://webapi.amap.com/theme/v1.3/markers/n/mark_b.png',
					position: [this.loc.longitude, this.loc.latitude],
					offset: new AMap.Pixel(-10, -26),
					zIndex: 102
				})
				if (name) {
					let num = name.length * 4
					marker.value.setLabel({
						offset: new AMap.value.Pixel(-num, 35),
						content: name
					})
				}
				this.map.add(this.marker)
			},
			// 点击搜索结果
			handleClickResult(e) {
				// console.log(JSON.parse(JSON.stringify(e)))
				this.registerForm.position = e.address + e.name;
				this.keyword = e.name;
				const {
					location,
					district,
					address
				} = e
				const {
					lng,
					lat
				} = location || {}
				// 1. 如果当前搜索结果有经纬度, 直接在地图上选中, 并返回当前的值
				if (lng && lat) {
					this.map.clearMap() //先清空点位
					this.changeValue(lng, lat, e.name, district + address)
				} else {
					this.isShowResult = false
					this.placeSearch.search(district + address);
				}
			},
			changeValue(longitude, latitude, name, address) {
				this.isShowResult = false
				this.loc.longitude = longitude
				this.loc.latitude = latitude
				const center = new AMap.LngLat(longitude, latitude);
				// 将地图的中心点移动到指定的经纬度
				this.map.setCenter(center);
				this.marker = new AMap.Marker({
					icon: 'https://webapi.amap.com/theme/v1.3/markers/n/mark_b.png',
					position: [this.loc.longitude, this.loc.latitude],
					zIndex: 103
				})
				this.map.add(this.marker)
			},
			// 输入框搜索显示下拉
			searchByKeyword() {
				this.autocomplete.search(this.keyword, (status, result) => {
					console.log(status, result)
					if (status === 'complete' && result.info === 'OK') {
						this.searchResult = result.tips.map((item) => {
							return {
								...item,
								address: Array.isArray(item.address) ? (item.address[0] || '') : item
									.address
							}
						})
						this.isShowResult = true
					}
				})
			},
			sureSelPoint() {
				if (this.loc.latitude && this.loc.longitude) {
					this.dialogVisible = false
					this.$emit('sendLoc', this.loc)
				} else {
					this.$message.warning('请选择经纬度')
				}
			},


			getUserInfo() {
				getOfficialInfo().then(res => {
					if (res.code == 200) {
						this.registerPersonnel.officesIds = [res.data.id]
					}
				})
			},

			// 上传参会人员成功
			importMeetingRoleSuccess(res, file) {
				if (res.code == 200) {
					// console.log(JSON.parse(JSON.stringify(res.data)))
					this.roleList = res.data.roles;
					this.doctorCk = res.data.users;
					let ids = {};
					for (let i in res.data.users) {
						ids[i] = [];
						for (let j in res.data.users[i]) {
							ids[i].push(res.data.users[i][j].id)
						}
					}
					this.doctorIds = ids;
					this.$forceUpdate();
				} else {
					this.$message.error(res.msg);
					// this.$alert(res.msg, '导入失败', {
					// 	confirmButtonText: '确定',
					// 	type: "error",
					// 	center: true,
					// });

          this.$alert(res.msg.replace(/;/g, '<br>'), '导入失败', {
            confirmButtonText: '确定',
            type: 'error',
            center: true,
            dangerouslyUseHTMLString: true
          });


				}
			},

			// 获取地区列表
			getLocationListFun() {
				getLocationList().then(res => {
					if (res.code == 200) {
						this.locationList = res.data
					}
				})
			},

			// 获取项目列表
			getProjectList(query) {
				let data = {
					current: 1,
					size: 30,
					projectName: query
				}
				// console.log(data)

				oprojectList(data).then(res => {
					if (res.code == 200) {
						this.pjtList = res.data.records;
					}
				})
			},
			// 查询部门内人员列表
			getDepartmentList(id, section) {
				// console.log(id, section)
				if (id) {
					let data = {}
					data.projectId = this.registerForm.projectId;
					if (section == 'meetingMechanismId') data.mechanismId = id; // 立项单位
					if (section == 'meetingEnterpriseId') data.enterpriseId = id; // 支持企业
					if (section == 'meetingActuatorId') data.actuatorId = id; // 执行机构
					getofficialUserList(data).then(res => {
						if (res.code == 200) {
							// console.log(res.data)
							if (section == 'meetingMechanismId') this.projectOriginator = res.data; // 立项单位
							if (section == 'meetingEnterpriseId') this.supportStaff = res.data; // 支持企业
							if (section == 'meetingActuatorId') this.executive = res.data; // 执行机构
						}
					})
				} else {
					if (section == 'meetingMechanismId') {
						this.registerPersonnel.officesIds = [];
						this.registerPersonnel.fundraisingIds = [];
						this.projectOriginator = ''; // 立项单位
					}
					if (section == 'meetingEnterpriseId') this.supportStaff = ''; // 支持企业
					if (section == 'meetingActuatorId') {
						this.registerPersonnel.meetingActuatorIds = [];
						this.executive = []; // 执行机构
					}
				}
			},
			officialActuatorListFun() {
				//获取立项单位列表
				officialtMechanismList().then(res => {
					if (res.code == 200) {
						this.MechanismList = res.data;
					}
				})

				// 获取支持企业列表
				officialEnterPriseList().then(res => {
					if (res.code == 200) {
						this.enterPriseList = res.data;
					}
				})

				// 获取执行机构列表
				officialActuatorList().then(res => {
					if (res.code == 200) {
						this.orgList = res.data
					}
				})
			},
			deleteFun(item) {
				this.roleList.map(item => item.id).map((id, idx) => {
					if (item.id == id) {
						this.roleList.splice(idx, 1);
						this.doctorCk[item.id] = [];
						this.doctorIds[item.id] = [];
					}
				})
			},
			addStandingFun(formName) {
				this.$refs[formName].validate((valid) => {
					if (valid) {
						this.addStanding = false;
						let stand = JSON.parse(JSON.stringify(this.StandForm));
						stand.id = this.getRandomNumber(12);
						this.roleList = [...this.roleList, stand];
						this.doctorCk[stand.id] = [];
						this.doctorIds[stand.id] = [];
						this.StandForm = {};
					} else {
						return false;
					}
				});
			},
			getRandomNumber(digits) {
				var min = Math.pow(10, digits - 1);
				var max = Math.pow(10, digits) - 1;
				return Math.floor(Math.random() * (max - min + 1)) + min;
			},
			resetForm() {
				this.StandForm = {};
			},
			infohtmlset(e) {
				// console.log(e)
				this.address = e.title;
				this.registerForm.position = e.title
				this.registerForm.longitude = e.point.lng
				this.registerForm.latitude = e.point.lat
				// this.registerForm.location = [e.province, e.city]
			},
			querySearch(queryString, cb) {
				var restaurants = this.surroundingPois;
				var results = queryString ? restaurants.filter(this.createFilter(queryString)) : restaurants;
				// 调用 callback 返回建议列表的数据
				cb(results);
			},
			createFilter(queryString) {
				return (restaurant) => {
					return (restaurant.address.toLowerCase().indexOf(queryString.toLowerCase()) === 0);
				};
			},
			addressSelect(item) {
				console.log(item)
			},
			getClickInfo(e) {
				// 创建地理编码实例
				const myGeo = new BMap.Geocoder();
				// 根据坐标逆解析地址
				myGeo.getLocation(new BMap.Point(e.point.lng, e.point.lat), (result) => {
					if (result) {
						this.address = result.address;
						this.surroundingPois = result.surroundingPois;
					}
				});
			},

			cascaderChange(e) {
				console.log(e)
			},
			getProjectByIdFun() {
				officialGetProjectById({
					id: this.registerForm.projectId
				}).then(res => {
					if (res.code == 200) {
						console.log("项目信息", res.data)
						this.registerPersonnel.bgImage = res.data.bill ? res.data.bill : ""; //会议的背景图优先使用项目的

						this.registerPersonnel.coverImageUrl = res.data.coverImageUrl ? res.data.coverImageUrl
							.replace("https", "http") :
							""; //会议的kv优先使用项目的kv
						this.projectName = res.data.projectName;


						this.registerPersonnel.meetingMechanismId = res.data.mechanismId * 1;
						this.registerPersonnel.meetingActuatorId = res.data.actuatorId * 1;
						this.projectInfo = res.data;

						if (this.registerPersonnel.meetingActuatorId) this.getDepartmentList(this.registerPersonnel
							.meetingActuatorId, 'meetingActuatorId');
						if (this.registerPersonnel.meetingEnterpriseId) this.getDepartmentList(this
							.registerPersonnel.meetingEnterpriseId, 'meetingEnterpriseId');
						if (this.registerPersonnel.meetingMechanismId) this.getDepartmentList(this
							.registerPersonnel.meetingMechanismId, 'meetingMechanismId');
					}
				})
			},
			reaioInput(e) {
				console.log(e)
			},
			creatorDoctor() {
				this.$router.push({
					name: 'creatdoc',
					query: {
						from: 'creat',
						pId: this.$route.query.pId
					}
				})
			},
			// 缓存回显
			echo() {
				let cache = JSON.parse(localStorage.getItem("cache"));
				if (cache) {
					if (cache.timestamp) this.registerForm.timestamp = cache.timestamp;
					if (cache.meetTit) this.registerForm.conferenceTheme = cache.meetTit;
					if (cache.registerImg) this.registerImg = cache.registerImg;
				}
			},
			getMeetingDetail() {
				let data = {
					meetingId: this.$route.query.mId
				};
				officialGetUpdateMeetInfo(data).then(res => {
					if (res.code == 200) {
						this.registerForm.projectId = res.data.projectId;
						this.registerForm.meetingAgreementStartDate = res.data.meetingAgreementStartDate ? res.data
							.meetingAgreementStartDate : '';
						this.registerForm.meetingAgreementEndDate = res.data.meetingAgreementEndDate ? res.data
							.meetingAgreementEndDate : '';
						this.registerForm.projectName = res.data.projectName;
						this.registerForm.timestamp = res.data.meetingStartTime;
						this.registerForm.conferenceTheme = res.data.meetingTitle;
						this.registerForm.meetingFormat = res.data.meetingFormat;
						this.registerForm.location = res.data.location ? res.data.location.map(item => item
							.trim()) : '';
						this.registerForm.position = res.data.position;
						this.registerForm.longitude = res.data.longitude;
						this.registerForm.locationId = res.data.locationId * 1;
						this.registerForm.latitude = res.data.latitude;
						this.registerForm.meetingLiveUrl = res.data.meetingLiveUrl;

						//背景图 kv 海报
						this.registerPersonnel.bill = res.data.bill ? res.data.bill : '';
						this.registerPersonnel.bgImage = res.data.bgImage ? res.data.bgImage : '';
						this.registerPersonnel.coverImageUrl = res.data.coverImageUrl ? res.data.coverImageUrl :
							'';
						console.log("现在kv", this.registerPersonnel.coverImageUrl)
						console.log("bgImage", this.registerForm.bgImage);


						this.meetingStatus = res.data.meetingStatus;
						// this.registerImg[1] = {
						// 	url: res.data.bgImage
						// };
						// this.registerImg[2] = {
						// 	url: res.data.bill
						// };
						let ids = JSON.parse(JSON.stringify(res.data.users))
						for (let i in ids) {
							this.doctorCk[i] = ids[i];
							this.doctorIds[i] = ids[i].map(item => item.id)
						}
						this.registerPersonnel.meetingActuatorId = res.data.meetingActuatorId ? res.data
							.meetingActuatorId * 1 : '';
						this.registerPersonnel.meetingEnterpriseId = res.data.meetingEnterpriseId ? res.data
							.meetingEnterpriseId * 1 : '';
						this.registerPersonnel.meetingMechanismId = res.data.meetingMechanismId ? res.data
							.meetingMechanismId * 1 : '';
						// this.registerPersonnel.actuatorIds = res.data.actuatorIds;
						this.registerPersonnel.fundraisingIds = res.data.fundraisingIds;
						this.registerPersonnel.officesIds = res.data.officesIds;
						this.registerPersonnel.meetingActuatorIds = res.data.meetingActuatorIds;
						this.registerPersonnel.laborActuatorIds = res.data.laborActuatorIds;

						// console.log('meetingActuatorIds ', res.data.meetingActuatorIds);

						if (res.data.meetingActuatorId) this.getDepartmentList(res.data.meetingActuatorId,
							'meetingActuatorId');
						if (res.data.meetingEnterpriseId) this.getDepartmentList(res.data.meetingEnterpriseId,
							'meetingEnterpriseId');
						if (res.data.meetingMechanismId) this.getDepartmentList(res.data.meetingMechanismId,
							'meetingMechanismId');
						this.$forceUpdate();
					}
				});
			},
			// 确认并结束会议
			onSubmit2() {
				let submit1 = false;
				let submit2 = false;
				let submit3 = false;
				this.$refs['registerForm'].validate((valid) => {
					if (valid) {
						submit1 = true;
					} else {
						console.log('error submit!!');
						return false;
					}
				});
				this.$refs['registerPersonnel'].validate((valid) => {
					if (valid) {
						submit2 = true;
					} else {
						console.log('error submit!!');
						return false;
					}
				});

				if (submit1 && submit2) {
					this.loading = true;
					this.updateMeetingFun("FINISH")
				} else {
					this.$message.error('请填写完整信息');
				}
			},
			onSubmit() {
				console.log(this.registerPersonnel);
				console.log(this.registerForm);
				console.log(this.doctorCk)
				let submit1 = false;
				let submit2 = false;
				let submit3 = false;
				this.$refs['registerForm'].validate((valid) => {
					if (valid) {
						submit1 = true;
					} else {
						return false;
					}
				});
				this.$refs['registerPersonnel'].validate((valid) => {
					if (valid) {
						submit2 = true;
					} else {
						return false;
					}
				});
				if (submit1 && submit2) {
					this.loading = true;
					this.updateMeetingFun()
				} else {
					this.$message.error('请填写完整信息');
				}
			},
			updateMeetingFun(status) {
				console.log(this.registerPersonnel.bgImage);
				console.log(this.registerPersonnel.bill)
				let data = {
					users: this.doctorCk,
					projectId: this.registerForm.projectId,
					meetingStartTime: this.registerForm.timestamp,
					meetingTitle: this.registerForm.conferenceTheme,
					meetingFormat: this.registerForm.meetingFormat,
					bgImage: this.registerPersonnel.bgImage,
					bill: this.registerPersonnel.bill,
					coverImageUrl: this.registerPersonnel.coverImageUrl,
					roleList: this.roleList,
					fundraisingIds: this.registerPersonnel.fundraisingIds,
					actuatorIds: this.registerPersonnel.actuatorIds,
					officesIds: this.registerPersonnel.officesIds,
					meetingMechanismId: this.registerPersonnel.meetingMechanismId,
					meetingActuatorId: this.registerPersonnel.meetingActuatorId,
					meetingEnterpriseId: this.registerPersonnel.meetingEnterpriseId,
					meetingActuatorIds: this.registerPersonnel.meetingActuatorIds,
					laborActuatorIds: this.registerPersonnel.laborActuatorIds,
					locationId: this.registerForm.locationId,
					meetingAgreementStartDate: this.registerForm.meetingAgreementStartDate,
					meetingAgreementEndDate: this.registerForm.meetingAgreementEndDate,
					meetingLiveUrl: this.registerForm.meetingLiveUrl,
				};
				if (this.registerForm.location) {
					data.location = this.registerForm.location;
				}
				if (this.registerForm.position) {
					data.position = this.registerForm.position;
					data.longitude = this.registerForm.longitude;
					data.latitude = this.registerForm.latitude;
				}

				if (status) {
					data.meetingStatus = status;
				};
				if (this.$route.query.parentId) {
					data.parentId = this.$route.query.parentId;
				}
				if (this.registerForm.meetId) {
					// 修改会议
					data.id = this.registerForm.meetId;
					officialUpdateMeeting(data).then(res => {
						if (res.code == 200) {
							localStorage.removeItem('cache');
							setTimeout(() => {
								this.loading = false;
								// 修改会议成功后跳转回会议详情
								this.$router.push({
									name: 'officialMeetingDetail',
									query: {
										meetingId: this.registerForm.meetId,
										now: 1
									}
								})
							}, 300)
							this.$message({
								message: '修改成功',
								type: 'success'
							});
							this.$notify({
								type: 'success',
								title: '修改成功',
								message: '修改会议信息成功',
								position: 'bottom-right'
							});
						} else {
							this.loading = false;
							this.$message({
								message: res.msg,
								type: 'error'
							});
						}
					}).catch(err => {

					})
				} else {
					// 创建会议
					officialCreateMeeting(data).then(res => {
						if (res.code == 200) {
							this.loading = false;
							localStorage.removeItem('cache');
							if (this.projectDetails.projectType == 'single') {
								this.$router.push({
									name: 'officialSingleMeets',
								})
							} else {
								this.$router.push({
									name: 'officialMeetinglist',
									query: {
										pId: this.projectDetails.id,
									}
								})
							}

							// if (this.$route.query.parentId) {
							// 	this.$router.push({
							// 		name: 'officialSingleMeets',
							// 	})
							// } else {
							// 	this.$router.push({
							// 		name: 'officialMeetingDetail',
							// 		query: {
							// 			meetingId: this.registerForm.meetId,
							// 			now: 1
							// 		}
							// 	})
							// }
							this.$message({
								message: '创建成功',
								type: 'success'
							});
							this.$notify({
								type: 'success',
								title: '创建成功',
								message: '会议创建成功',
								position: 'bottom-right'
							});
						} else {
							this.loading = false;
							this.$message({
								message: res.msg,
								type: 'error'
							});
						}
					}).catch(err => {
						this.loading = false;
					})
				};

				// console.log(JSON.parse(JSON.stringify(data)));
			},
			handleAvatarSuccess1(res, file) {
				// console.log(res, file);
				this.registerImg['1'] = {
					file: URL.createObjectURL(file.raw),
					path: res,
					url: res
				}
			},
			handleAvatarSuccess2(res, file) {
				this.registerImg['2'] = {
					file: URL.createObjectURL(file.raw),
					path: res,
					url: res
				}
			},
			handlePictureCardPreview(file) {
				this.dialogImageUrl = file.url;
				this.dialogVisible = true;
			},
			beforeAvatarUpload(file) {
				// const isJPG = file.type === 'image/jpeg';
				const isLt20M = file.size / 10204 / 10204 < 20;
				// if (!isJPG) {
				// 	this.$message.error('上传头像图片只能是 JPG 格式!');
				// }
				if (!isLt20M) {
					this.$message.error('上传头像图片大小不能超过 20MB!');
				}
				return isLt20M;
			},
			// 选中医生
			checkDoctor(par) {
				for (let i in this.roleList) {
					let item = this.roleList[i];
					if (this.doctorType == `${item.id}`) {
						if (this.doctorIds[`${item.id}`].indexOf(par.id) == -1) {
							this.doctorCk[`${item.id}`] = [...this.doctorCk[`${item.id}`], ...[
								par
							]];
							this.doctorIds[`${item.id}`] = [...this.doctorIds[`${item.id}`], ...[
								par.id
							]];
						} else {
							this.doctorCk[`${item.id}`].splice(this.doctorIds[`${item.id}`].indexOf(par.id), 1);
							this.doctorIds[`${item.id}`].splice(this.doctorIds[`${item.id}`].indexOf(par.id), 1);
						}
					}
				}
				this.$forceUpdate();
			},
			// 打开选择医生页面
			showDoctorsFun(item) {
				// console.log(item);
				this.doctorType = item;
				this.persShow = true;
				this.doctorList = [];
				let checks = [];
				for (let i in this.doctorIds) {
					if (i != item) {
						let item = this.doctorIds[i];
						checks = [...checks, ...item];
					}
				};
				this.checks = checks;
				this.checked = this.doctorIds[item];
				this.getDoctorList();
			},
			getRoleListFun() {
				officialGetMeetRoleList({
					meetingId: this.registerForm.meetId
				}).then(res => {
					if (res.code == 200) {
						this.roleList = res.data ? res.data : [];
						if (res.data[0]) {
							this.doctorType = res.data[0].id;
							res.data.map(item => {
								this.doctorCk[`${item.id}`] = [];
								this.doctorIds[`${item.id}`] = [];
							});
						}
					}
				})
			},
			getProjectDetails() {
				let projectDetails = JSON.parse(localStorage.getItem('projectDetails'));
				this.projectDetails = projectDetails;
				this.registerForm.projectType = projectDetails.projectType;
			},
			// 搜索操作
			searthDoctorFun() {
				this.page = 1;
				this.getDoctorList();
			},
			// 获取医生列表
			getDoctorList() {
				// this.loading = true;
				let data = {
					projectId: this.registerForm.projectId,
					current: this.page,
					size: this.size,
					checks: this.checks.join(','),
					checked: this.checked.join(',')
				};
				if (this.nameKeyword) data.fullName = this.nameKeyword;
				if (this.departVal) data.department = this.departVal;
				if (this.titVal) data.title = this.titVal;
				if (this.orderBy) data.orderBy = this.orderBy;
				officialGetDoctorList(data).then(res => {
					// this.loading = false;
					if (res.code == 200) {
						this.doctorList = res.data.records;
						this.total = res.data.total;
					}
				})
			},
			bank() {
				this.$confirm('此操作将清空已输入内容的缓存, 是否继续?', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					this.$router.go(-1)
					localStorage.removeItem('cache');
				})
			},

			// 切换背景图片的方法
			switchBackground() {
				this.currentBackgroundIndex = (this.currentBackgroundIndex + 1) % this.backgroundImages.length;
			},
			toViewImage() {
				if (!this.registerForm.timestamp || !this.registerForm.conferenceTheme) {
					// this.$message.error('请填写会议信息并点击"生成海报预览"按钮创建您的专属海报');
					this.$message.error('请填写会议主题及会议时间并点击"生成海报预览"按钮创建您的专属海报');
					return
				}
				if (!this.registerPersonnel.coverImageUrl) {
					this.$message.error('请先上传会议KV图后再点击"生成海报预览"按钮创建您的专属海报');
					return
				}
				console.log(this.allDoctorList)
				console.log(this.doctorCk)
				this.allDoctorList = [];
				for (let key in this.doctorCk) {
					if (this.doctorCk.hasOwnProperty(key)) {
						this.allDoctorList.push(...this.doctorCk[key]);
					}
				}
				if (this.allDoctorList.length == 0) {
					this.$message.error('请先添加参会医生并点击"生成海报预览"按钮创建您的专属海报');
					return
				}

				if (this.registerPersonnel.coverImageUrl.includes("?")) {
					this.coverImageUrl = this.registerPersonnel.coverImageUrl.replace("https", "http") +
						`&timestamp= ${Date.now()}`
				} else {
					this.coverImageUrl = this.registerPersonnel.coverImageUrl.replace("https", "http") +
						`?timestamp= ${Date.now()}`
				}
				this.billImageShow = true;
				// this.$refs.kvImage.src = this.coverImageUrl + `?timestamp= ${Date.now()}`

				console.log("this.coverImageUrl", this.coverImageUrl)
				console.log(this.allDoctorList);

			},


			//保存图片
			convertToCanvas() {
				if (this.registerPersonnel.coverImageUrl.includes("?")) {
					this.coverImageUrl = this.registerPersonnel.coverImageUrl.replace("https", "http") +
						`&timestamp= ${Date.now()}`
				} else {
					this.coverImageUrl = this.registerPersonnel.coverImageUrl.replace("https", "http") +
						`?timestamp= ${Date.now()}`
				}
				console.log("bacun", this.registerPersonnel.coverImageUrl)
				// this.billImageShow = true;
				try {
					// let targetDom = document.getElementById("canvasBox");
					let targetDom = this.$refs.canvasBox;
					html2canvas(targetDom, {
						useCORS: true,
						allowTaint: true,
						scale: 1,
						dpi: window.devicePixelRatio * 2,
						height: targetDom.scrollHeight,
						windowHeight: targetDom.scrollHeight,
					}).then(canvas => {
						const watermarkedCanvas = document.createElement("canvas");
						const ctx = watermarkedCanvas.getContext("2d");
						watermarkedCanvas.width = canvas.width;
						watermarkedCanvas.height = canvas.height;
						ctx.drawImage(canvas, 0, 0);
						// 添加水印
						// this.addWatermark(
						// 	'成都万木健康',
						// 	ctx,
						// 	watermarkedCanvas.width,
						// 	watermarkedCanvas.height
						// );
						this.canvasimgUrl = watermarkedCanvas.toDataURL("image/png");
						let noCanvasimgUrl = this.canvasimgUrl.replace(
							/^data:image\/\w+;base64,/,
							""
						);
						console.log(this.canvasimgUrl); //本地预览图片地址
						console.log(noCanvasimgUrl); //通过base64传给后台时需要去掉前缀(看项目)
						this.uploadData()

						// // 将canvas转为data URL
						// this.generatedImage = canvas.toDataURL('image/png');
						// this.generating = false;
					}).catch(error => {
						console.error('海报生成失败:', error);
						this.$message.error('海报生成失败，请重试');
						// this.generating = false;
					});

				} catch (error) {
					console.error("Error capturing screenshot:", error);
				}


			},
			//添加水印
			addWatermark(watermarkText, ctx, width, height) {
				const fontSize = 40;
				const color = "rgba(2, 141, 232, 0.1)"; // 文字颜色（这里用透明度遮住文字不那么明显）
				const angle = -45; // 倾斜角度
				const padding = 100; // 水印之间的间距
				// 设置字体样式
				ctx.font = `${fontSize}px Arial`;
				ctx.fillStyle = color;
				ctx.textAlign = "center";
				ctx.textBaseline = "middle";
				// 计算水平和垂直方向上的水印数量
				const textWidth = ctx.measureText(watermarkText).width;
				const textHeight = fontSize; // 近似值
				const horizontalCount = Math.ceil(width / (textWidth + padding));
				const verticalCount = Math.ceil(height / (textHeight + padding));
				// 绘制水印
				for (let i = 0; i < horizontalCount; i++) {
					for (let j = 0; j < verticalCount; j++) {
						const x =
							i * (textWidth + padding) +
							(textWidth + padding) / 2 -
							textWidth / 2;
						const y =
							j * (textHeight + padding) +
							(textHeight + padding) / 2 -
							textHeight / 2;
						ctx.save();
						ctx.translate(x, y);
						ctx.rotate((angle * Math.PI) / 180);
						ctx.fillText(watermarkText, fontSize, 0);
						ctx.restore();
					}
				}
			},


			base64ToFile(dataurl, filename) {
				const arr = dataurl.split(',');
				const mime = arr[0].match(/:(.*?);/)[1];
				const bstr = atob(arr[1]);
				let n = bstr.length;
				const u8arr = new Uint8Array(n);
				while (n--) {
					u8arr[n] = bstr.charCodeAt(n);
				}
				return new File([u8arr], filename, {
					type: mime
				});
			},
			uploadData() {
				if (!this.canvasimgUrl) return;
				let file = this.base64ToFile(this.canvasimgUrl, 'generated-image.png');
				const formData = new FormData();
				formData.append('file', file);
				// formData.append('timestamp', new Date().toISOString());
				let url = this.baseUrl + "/sign/live/doctor/uploadFetchFile";
				fetch(url, {
					method: 'POST',
					body: formData,
					// headers不需要设置Content-Type，浏览器会自动设置
				}).then(response => {
					console.log("状态", response)
					if (!response.ok) {
						this.billImageShow = false;
						throw new Error('网络响应异常');
					}
					return response.json();
				}).then(data => {
					console.log('上传成功:', data);
					this.$message.success('海报生成成功');
					this.registerPersonnel.bill = data.data.fileUrl
					this.billImageShow = false;
				}).catch(error => {
					this.billImageShow = false;
					this.$message.error('海报生成失败');
					console.error('上传失败:', error);
				});

			}


		}
	}
</script>

<style lang="scss" scoped>
	#createmeet {
		display: flex;
		padding: 20px;
		flex-direction: row;
		flex-wrap: wrap;

		>div {
			display: flex;
			flex-direction: row;
			flex-wrap: wrap;
		}

		.title {
			font-size: 20px;
			margin-bottom: 20px;
		}

		.center {
			::v-deep .el-form {
				.el-form-item__label {
					line-height: 1;
					color: #112950;

					&:before {
						display: none;
					}
				}
			}
		}

		.preview-title {
			color: red;
			margin-bottom: 10px;
		}

		.left {
			flex: 2;
			padding: 20px;
			margin-right: 20px;
			box-shadow: 0px 2px 13px rgba(203, 203, 203, 0.31);

			::v-deep .el-form {
				width: 100%;
				display: flex;
				flex-direction: column;

				.meetingType {
					height: 40px;
					border-bottom: 1px solid #E5E5E5;
					padding: 0 15px;
					display: flex;
					justify-content: space-between;

					.docs {}


					.placeholder {
						color: #C0C4CC;
						display: block;
						cursor: pointer;
					}

					.add {
						color: #007AFF;
						display: flex;
						flex-direction: row;
						justify-content: center;
						align-items: center;
						cursor: pointer;
						width: 100px;
					}
				}

				.el-form-item {
					// margin: 14px 0;
				}

				.doctors {
					position: relative;

					.el-form-item__label {
						display: flex;
						align-items: center;
						justify-content: flex-start;

						span {
							width: 140px;
						}

						b {
							font-weight: normal;
						}
					}

					.delete {
						position: absolute;
						right: 0;
						top: 0;
						transform: translateY(-150%);
						padding: 0;
						display: none;
					}

					&:hover {
						.delete {
							display: block;
						}
					}

					.el-form-item__content {
						margin-top: 10px;
						background-color: #F6F7F9;
						padding: 4px 0;
						border-radius: 8px;
					}

				}

				.attendingDoctor {
					display: flex;
					align-items: center;
					// justify-content: space-between;
					margin: 30px 0 20px;

					.label {
						font-size: 18px;
					}

					.option {
						margin-left: 20px;
						display: flex;
						align-items: center;

						.addStanding {
							padding: 4px 5px;
							font-size: 12px;
						}

						.el-link {
							font-size: 12px;
							margin-left: 10px;
						}

						.upload {
							margin-left: 10px;
						}
					}
				}

				.el-form-item__label {
					// padding: 0;
					line-height: 1;
					// color: #112950;

					// &:before {
					// 	display: none;
					// }
				}


				// .el-input__inner {
				// 	border: none;
				// 	border-radius: 0;
				// 	background-color: transparent;
				// }

				// .el-input-group__append {
				// 	border: none;
				// 	background-color: transparent;
				// }

				.el-checkbox {
					display: flex;
					align-items: center;
				}

				.meetingType {
					border-bottom: 0;
				}

				.el-radio-group {
					padding: 0 15px;

					.el-radio {
						margin: 2px 10px 2px 0;
					}
				}
			}

		}

		.center {
			flex: 1;
			padding: 20px;
			margin-right: 20px;
			box-shadow: 0px 2px 13px rgba(203, 203, 203, 0.31);
		}

		.right {
			flex: 1;
			padding: 20px;
			max-width: 350px;
			box-shadow: 0px 2px 13px rgba(203, 203, 203, 0.31);

			::v-deep .el-upload {
				width: 300px;
				height: 200px;
				display: flex;
				align-items: center;
				justify-content: center;

				.el-icon-plus {
					border: 2px dashed #f5f5f5;
					border-radius: 10px;
					width: 300px;
					height: 200px;
				}

				.imageError {
					width: 100%;
					color: #999;
					height: 100%;
					display: flex;
					align-items: center;
					border-radius: 10px;
					border: 2px solid #eee;
					flex-direction: column;
					justify-content: center;

					span {
						line-height: 1;
					}

					i {
						font-size: 30px;
					}
				}
			}

			.el-icon-plus {
				width: 300px;
				height: 200px;
				font-size: 50px;
				padding: 20px;
				border: 1px dashed #eee;
				display: flex;
				align-items: center;
				justify-content: center;
			}

			.avatar {
				width: 300px;
				height: 200px;
				object-fit: cover;
				border-radius: 10px;
			}
		}

		.options {
			width: 100%;
			display: flex;
			flex-direction: row;
			align-items: center;
			justify-content: center;
			padding: 40px 0 20px 0;

			// .el-button {
			// 	padding: 12px 40px;
			// }

			// .next {
			// 	background-color: #007AFF;
			// 	color: #fff;
			// }

			// .back {}
		}

		.el-dialog__wrapper {
			overflow: hidden;
		}

		::v-deep .map {
			margin: 0 !important;
			left: 50%;
			top: 50%;
			max-height: 90vh;
			transform: translate(-50%, -50%);
			overflow: hidden;
			overflow-y: auto;
			width: 1100px;

			.el-dialog__header {
				padding: 0;
			}

			.el-dialog__body {
				height: 100%;
			}


			.mapBox {
				position: relative;

				.searchBox {
					position: absolute;
					z-index: 111;
					top: 10px;
					left: 10px;
				}

				#container {}

				.feedbackAndOperation {
					display: flex;
					margin-top: 20px;

					.el-form-item {
						margin-bottom: 0;
					}
				}
			}

			.search-result {
				width: 100%;
				max-height: 300px;
				overflow-y: scroll;
				background-color: #fff;
				box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.0600);
				box-sizing: border-box;

				.result-item {
					width: 100%;
					cursor: pointer;
					border-bottom: 2px solid #eee;
					padding: 10px 12px;

					.area-name {
						overflow: hidden;
						text-overflow: ellipsis;
						white-space: nowrap;
						height: 20px;
						color: rgba(0, 0, 0, 0.65);
						font-size: 14px;
						line-height: 20px;
					}

					.area-address {
						color: rgba(0, 0, 0, 0.4500);
						font-size: 12px;
						line-height: 18px;
					}
				}
			}

		}

		::v-deep .posterPreview {
			margin: 0 !important;
			left: 50%;
			top: 50%;
			min-height: 600px;
			max-height: 90vh;
			transform: translate(-50%, -50%);
			overflow: hidden;
			overflow-y: auto;
			width: auto;
		}

		::v-deep .doctorList {
			margin: 0 !important;
			left: 50%;
			top: 50%;
			min-height: 600px;
			max-height: 90vh;
			transform: translate(-50%, -50%);
			overflow: hidden;
			overflow-y: auto;
			width: 1100px;

			// .el-dialog {
			// 	width: 100%;
			// 	height: 100%;
			// 	margin: 0;
			// }

			.el-dialog__header {
				padding: 0;
			}

			.el-dialog__body {
				display: flex;
				height: 100%;
				flex-direction: column;
			}

			.title {
				font-size: 20px;
				margin-bottom: 20px;
			}

			.searth {
				display: flex;
				flex-direction: row;
				margin-bottom: 20px;

				.el-input {
					flex: 3;
					margin-right: 20px;
				}

				.el-select {
					flex: 2;
					margin-right: 20px;
				}

				.el-button {}
			}

			.list {
				width: 100%;
				display: flex;
				flex-direction: row;
				flex-wrap: wrap;
				margin-bottom: 30px;
				justify-content: flex-start;
				align-items: flex-start;

				.item {
					width: 49%;
					height: 110px;
					display: flex;
					cursor: pointer;
					transition: all .3s;
					padding: 20px;
					margin-bottom: 10px;
					margin-right: 2%;
					border-bottom: 1px solid #E5E5E5;

					&:nth-of-type(2n) {
						margin-right: 0;
					}

					&:hover {
						box-shadow: 0 0 10px rgba(0, 0, 0, .1);
						border-color: rgb(0, 122, 255);
					}

					* {
						cursor: pointer;
					}

					img {
						width: 68px;
						height: 68px;
						padding: 20px;
						border-radius: 10px;
						background-color: rgb(0, 122, 255);
						margin-right: 10px;
					}

					.docInfo {
						display: flex;
						flex-direction: column;
						justify-content: space-between;
						align-items: space-between;
						padding: 3px 5px;
						width: 100%;
						position: relative;

						.icon {
							position: absolute;
							top: 50%;
							right: 10px;
							transform: translateY(-50%);
						}

						.name {
							font-size: 18px;
							display: flex;
							flex-direction: row;
						}

						.hospital {
							font-size: 15px;
							display: flex;
							flex-direction: row;
						}

						.tit {
							font-size: 14px;
							display: flex;
							flex-direction: row;

							span {}
						}
					}
				}

				.null {
					display: flex;
					flex-direction: column;
					align-items: center;
					justify-content: center;
					width: 100%;
					padding: 100px;

					img {
						width: 200px;
					}

					p {
						font-size: 18px;
						color: #A6A6A6;
						margin-top: 30px;
					}
				}
			}

			.pagination {
				flex: 1;
				display: flex;
				text-align: center;
				align-items: flex-end;
				justify-content: center;
			}

		}

		#qroode {
			width: 300px;
			height: 300px;
			margin: auto;
		}

		.tools-qrCode-right {
			align-items: center;
			background: #f3f4f9;
			border-left: 1px solid #eee;
			border-radius: 0 6px 6px 0;
			box-sizing: border-box;
			display: flex;
			flex-direction: column;
			height: 100%;
			justify-content: flex-start;
			padding: 0;
			position: relative;
			width: 264px;
		}


	}
</style>
